<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Script 5.2</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#main h2 {
	font: bold 30px Tahoma, Geneva, sans-serif;
	color: #036;
	border-bottom: 1px solid #666;
	margin-top:15px;
  text-transform:uppercase;
	position:relative
}
/* the class to overlay the headlines */
.headEffect {
position: absolute;
width: 100%;
display: block;
height:36px;
background: url(gradient.png) repeat;
}
/* for IE 6 only */
* html .headEffect {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
-->
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		$("#main h2") .prepend("<span class= 'headEffect'>XXX</span>");
	});
	
</script>
</head>
<body id="twoCol">
<div id="container">
  <div id="banner"><img src="../images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
  
  <div id="contentWrap">
  <div id="main">
  <h1>jQuery Enhanced Headlines</h1>
  <h2>A  mysterious headline</h2>
  <p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
  <h2>another cool headline</h2>
  <p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
  <h2>The fun just won't stop</h2>
  <p>Mauris imperdiet nisi ut pede. Vivamus nisi lorem, euismod in, fringilla et, porttitor in, nunc. Vivamus metus. </p>
  <p>&nbsp;</p>
</div>
  
  <div id="sidebar">
    <h2>Script 5.2</h2>
</div>
</div>
 
<div id="footer"><em>&#8220;Building Interactive Web Sites with JavaScript&#8221;</em></div>
</div>
</body>
</html>
